<? $this->load->view('includes/header')?>
<div class="row">
	<div class="span12">
		<h2>Form</h2><hr>
		<form class="form-horizontal">
		  <fieldset>
		    <div class="control-group">
		      <label for="focusedInput" class="control-label">Your Username:</label>
		      <div class="controls">
		        <input type="text" name="username" class="input-xlarge span6">
		      </div>
		    </div>
		    <div class="control-group">
		      <label class="control-label">Your Email Address:</label>
		      <div class="controls">
		        <input type="text" name="email" class="input-xlarge span6">
		        <input type="hidden" name="curent_email">
		      </div>
		    </div>
				<div class="control-group">
		      <label class="control-label">Your Birthday:</label>
		      <div class="controls">
		        <input type="text" name="dob" class="input-xlarge span6">
		      </div>
		    </div>
				<div class="control-group">
		      <label class="control-label">Your Device:</label>
		      <div class="controls">
		        <input type="text" class="input-xlarge span6" readonly="">
		      </div>
		    </div>
		    <div class="control-group">
		      <label class="control-label">Gender:</label>
		      <div class="controls">
		      	<div class="span1" style="padding-top:5px;margin-left:0;">
			         <label class="radio"><input type="radio" name="sex" value="0"> Male</label>			      	
		      	</div>
		      	<div class="span1" style="padding-top:5px;">
			        <label class="radio"><input type="radio" name="sex" value="1"> Female</label>
		      	</div>
		      </div>
		    </div>
		    <div class="control-group">
		      <div class="controls">
				    <label class="checkbox">
				      <input type="checkbox" name="subscriber" value="1"> Subscribe Newsletter
				    </label>
		      </div>
		    </div>
		
		    <div class="span8">
					<input type="submit" value="Update" class="btn btn-primary pull-right" style="margin-right: 20px;">
		    </div>
		  </fieldset>
		</form>
		<p>&nbsp;</p>
  </div><!-- span12 -->
</div><!-- row -->

<div class="row">
	<div class="span12">
		<h2>Table</h2><hr>
<table class="table table-bordered table-striped responsive-utilities">
  <thead>
    <tr>
      <th>kakdjnjvj</th>
      <th>klansdknv</th>
      <th>joijoqnf</th>
      <th>anosdnovadjsn</th>
      <th>kjanskjdncdnhb</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>asdfadsf</td>
      <td>oasdjfoiwe</td>
      <td>knknxcvjisad</td>
      <td>jrodnvus</td>
      <td>lkoadsofjnas</td>
    </tr>
    <tr>
      <td>asdfadsf</td>
      <td>oasdjfoiwe</td>
      <td>knknxcvjisad</td>
      <td>jrodnvus</td>
      <td>lkoadsofjnas</td>
    </tr>
    <tr>
      <td>asdfadsf</td>
      <td>oasdjfoiwe</td>
      <td>knknxcvjisad</td>
      <td>jrodnvus</td>
      <td>lkoadsofjnas</td>
    </tr>
  </tbody>
</table>
		<p>&nbsp;</p>
  </div><!-- span12 -->
</div><!-- row -->

<div class="row">
	<div class="span12">
		<h2>Date/Time Picker</h2><hr>
<div class="well">
	<h3>Default:</h3>
  <div id="datetimepicker1" class="input-append date">
    <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
  </div>
</div>
<script type="text/javascript">
  $(function() {
    $('#datetimepicker1').datetimepicker({
      language: 'pt-BR'
    });
  });
</script>

<div class="well">
	<h3>US date/hour format:</h3>
  <div id="datetimepicker2" class="input-append">
    <input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
  </div>
</div>
<script type="text/javascript">
  $(function() {
    $('#datetimepicker2').datetimepicker({
      language: 'en',
      pick12HourFormat: true
    });
  });
</script>

<div class="well">
	<h3>Disables date picker:</h3>
  <div id="datetimepicker3" class="input-append">
    <input data-format="hh:mm:ss" type="text"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
  </div>
</div>
<script type="text/javascript">
  $(function() {
    $('#datetimepicker3').datetimepicker({
      pickDate: false
    });
  });
</script>

<div class="well">
	<h3>Disables time picker:</h3>
  <div id="datetimepicker4" class="input-append">
    <input data-format="yyyy-MM-dd" type="text"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
  </div>
</div>
<script type="text/javascript">
  $(function() {
    $('#datetimepicker4').datetimepicker({
      pickTime: false
    });
  });
</script>
  </div><!-- span12 -->
</div><!-- row -->

<div class="row">
	<div class="span12">
		<h2>Modal Box</h2><hr>
		<a class="btn btn-primary" data-toggle="modal" href="#free"> Pencet bos </a>
		<div class="modal hide fade" id="free">
			<div class="modal-header">
				<a class="close" data-dismiss="modal" href="#"><i class="icon-remove-sign"></i></a>
				<h3>Modal Title</h3>
			</div>
			<div class="modal-body">
				<p>Lorem ipsum dolor sit amet.</p>
			</div>
			<div class="modal-footer">
				<a href="#" class="btn btn-primary" data-dismiss="modal">Button Primary</a>
				<a href="#" class="btn btn-danger" data-dismiss="modal">Button Danger</a>
				<a href="#" class="btn btn-warning" data-dismiss="modal">Button Warning</a>
				<a href="#" class="btn btn-inverse" data-dismiss="modal">Button Inverse</a>
			</div>
		</div>
		<p>&nbsp;</p>
  </div><!-- span12 -->
</div><!-- row -->

<? $this->load->view('includes/footer')?>